<template>
<div>
  <!-- 导航条 -->
  <div class="navBox">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple nav-left">
          <el-menu id="menu-items" class="el-menu-demo"  text-color="#333333" mode="horizontal" >
            <el-menu-item index="1"><router-link to="/">首頁</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/listMap">列表頁</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to="/myCenter">個人中心</router-link></el-menu-item>
            <el-menu-item index="5">房屋買賣/出租</el-menu-item>
            <el-menu-item index="6"><router-link to="/buyingTools">置業工具</router-link></el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-menu  class="el-menu-demo" text-color="#333333" mode="horizontal" >
            <el-menu-item index="7">我的收藏</el-menu-item>
            <el-menu-item index="8"><el-button><router-link to="/login">登入</router-link></el-button></el-menu-item>
            <el-menu-item index="9"><router-link to="/advertisement"><el-button style="background: #AD2022;color: #FFFFFF;">免費刊登樓房</el-button></router-link></el-menu-item>
            <el-menu-item index="10"><el-button class="txtType" style="">繁體</el-button></el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
</script>

<style scoped>
  .navBox{
    width: 1200px;
    margin: 0 auto;
    height: 80px;
    /* border: 1px solid #2C3E50; */
  }
  /* 修改鼠标经过状态 */
  .nav-left .el-menu-item:hover{
    background-color: #ad2022 !important;
    color: #fff !important;
    border: none !important;
  }
  .nav-left .el-menu-item.is-active{
    background-color: #ad2022 !important;
    color: #fff !important;
    border: none !important;
  }
  .el-menu-item.is-active{
    border: none !important;
  }
  .el-menu{
    border: none !important;
  }
  .el-menu-item:hover{
    border: none !important;
  }
   .el-menu-demo{
    border: none !important;
  }
  .bg-purple-light{
    line-height: 80px;
    display: flex;
    justify-content: flex-end;
  }
  .bg-purple-light .el-menu-demo .txtType{
    background: #e6e6e6;
    font-size: 12px;
    width: 43px;
    height: 26px;
    padding: 0;
  }

</style>
